<html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="images/favicon.ico"/><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="description" content=""/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Using on the Web · React Native Paper"/><meta name="twitter:description" content=""/><meta property="og:type" content="website"/><meta property="og:title" content="Using on the Web · React Native Paper"/><meta property="og:description" content=""/><title>Using on the Web · React Native Paper</title><link type="text/css" rel="stylesheet" href="app.css"/></head><body>
    <script>
      var theme;

      try {
        // Check if there is a preference saved
        theme = localStorage.getItem('preference-theme');
      } catch (e) {
        // Ignore
      }

      if (theme === undefined) {
        try {
          // If no preferred theme is set, read OS preference
          theme = window.matchMedia('(prefers-color-scheme: dark)').matches
            ? 'dark'
            : 'light';
        } catch (e) {
          // Ignore
        }
      }

      if (theme === 'dark') {
        document.body.classList.add('dark-theme');
      }
    </script>
  <div id='root'><div class="Layout_lugqar2"><aside class="SidebarContent_s9nrg4n"><input type="checkbox" id="slide-sidebar" role="button" class="MenuButton_mzfqg8l"/><label for="slide-sidebar" class="MenuIcon_m1mups47">☰</label><div class="MenuContent_mdzibsv"><input type="search" value="" placeholder="Filter…" class="Searchbar_s1nn5lbd"/><nav class="Navigation_nlggdah"><a data-selected="false" class="LinkItem_l1gpol2t" href="index.html">Home</a><a data-selected="false" class="LinkItem_l1gpol2t" href="getting-started.html">Getting Started</a><a data-selected="false" class="LinkItem_l1gpol2t" href="theming.html">Theming</a><a data-selected="false" class="LinkItem_l1gpol2t" href="icons.html">Icons</a><a data-selected="false" class="LinkItem_l1gpol2t" href="fonts.html">Fonts</a><a data-selected="true" class="LinkItem_l1gpol2t" href="using-on-the-web.html">Using on the Web</a><a data-selected="false" class="LinkItem_l1gpol2t" href="recommended-libraries.html">Recommended Libraries</a><a data-selected="false" class="LinkItem_l1gpol2t" href="showcase.html">Showcase</a><a data-selected="false" class="LinkItem_l1gpol2t" href="contributing.html">Contributing</a><a data-selected="false" class="LinkItem_l1gpol2t" href="theming-with-react-navigation.html">Theming with React Navigation</a><a data-selected="false" class="LinkItem_l1gpol2t" href="integrate-app-bar-with-react-navigation.html">Integrate AppBar with react-navigation</a><hr class="SeparatorItem_slziuo3"/><a data-selected="false" class="LinkItem_l1gpol2t" href="activity-indicator.html">ActivityIndicator</a><a data-selected="false" class="LinkItem_l1gpol2t" href="animated-fab.html">AnimatedFAB</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar.html">Appbar</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-action.html">Appbar.Action</a><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-back-action.html">Appbar.BackAction</a><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-content.html">Appbar.Content</a><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-header.html">Appbar.Header</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">Avatar</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="avatar-icon.html">Avatar.Icon</a><a data-selected="false" class="LinkItem_l1gpol2t" href="avatar-image.html">Avatar.Image</a><a data-selected="false" class="LinkItem_l1gpol2t" href="avatar-text.html">Avatar.Text</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="badge.html">Badge</a><a data-selected="false" class="LinkItem_l1gpol2t" href="banner.html">Banner</a><a data-selected="false" class="LinkItem_l1gpol2t" href="bottom-navigation.html">BottomNavigation</a><a data-selected="false" class="LinkItem_l1gpol2t" href="button.html">Button</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="card.html">Card</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="card-actions.html">Card.Actions</a><a data-selected="false" class="LinkItem_l1gpol2t" href="card-content.html">Card.Content</a><a data-selected="false" class="LinkItem_l1gpol2t" href="card-cover.html">Card.Cover</a><a data-selected="false" class="LinkItem_l1gpol2t" href="card-title.html">Card.Title</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox.html">Checkbox</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox-android.html">Checkbox.Android</a><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox-ios.html">Checkbox.IOS</a><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox-item.html">Checkbox.Item</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="chip.html">Chip</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table.html">DataTable</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-cell.html">DataTable.Cell</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-header.html">DataTable.Header</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-pagination.html">DataTable.Pagination</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-row.html">DataTable.Row</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-title.html">DataTable.Title</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog.html">Dialog</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-actions.html">Dialog.Actions</a><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-content.html">Dialog.Content</a><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-scroll-area.html">Dialog.ScrollArea</a><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-title.html">Dialog.Title</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="divider.html">Divider</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">Drawer</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="drawer-item.html">Drawer.Item</a><a data-selected="false" class="LinkItem_l1gpol2t" href="drawer-section.html">Drawer.Section</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="fab.html">FAB</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="fab-group.html">FAB.Group</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="helper-text.html">HelperText</a><a data-selected="false" class="LinkItem_l1gpol2t" href="icon-button.html">IconButton</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">List</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="list-accordion.html">List.Accordion</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-accordion-group.html">List.AccordionGroup</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-icon.html">List.Icon</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-item.html">List.Item</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-section.html">List.Section</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-subheader.html">List.Subheader</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="menu.html">Menu</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="menu-item.html">Menu.Item</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="modal.html">Modal</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="portal.html">Portal</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="portal-host.html">Portal.Host</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="progress-bar.html">ProgressBar</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button.html">RadioButton</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-android.html">RadioButton.Android</a><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-group.html">RadioButton.Group</a><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-ios.html">RadioButton.IOS</a><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-item.html">RadioButton.Item</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="searchbar.html">Searchbar</a><a data-selected="false" class="LinkItem_l1gpol2t" href="snackbar.html">Snackbar</a><a data-selected="false" class="LinkItem_l1gpol2t" href="surface.html">Surface</a><a data-selected="false" class="LinkItem_l1gpol2t" href="switch.html">Switch</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="text-input.html">TextInput</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="text-input-affix.html">TextInput.Affix</a><a data-selected="false" class="LinkItem_l1gpol2t" href="text-input-icon.html">TextInput.Icon</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="toggle-button.html">ToggleButton</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="toggle-button-group.html">ToggleButton.Group</a><a data-selected="false" class="LinkItem_l1gpol2t" href="toggle-button-row.html">ToggleButton.Row</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="touchable-ripple.html">TouchableRipple</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">Typography</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="caption.html">Caption</a><a data-selected="false" class="LinkItem_l1gpol2t" href="headline.html">Headline</a><a data-selected="false" class="LinkItem_l1gpol2t" href="paragraph.html">Paragraph</a><a data-selected="false" class="LinkItem_l1gpol2t" href="subheading.html">Subheading</a><a data-selected="false" class="LinkItem_l1gpol2t" href="text.html">Text</a><a data-selected="false" class="LinkItem_l1gpol2t" href="title.html">Title</a></div></div></nav></div></aside><main class="Container_c119hgic"><div class="HeaderWrapper_h1b6fqjq"><div class="LogoContainer_lz0sul8"><img src="images/sidebar-logo.svg" alt="Logo" class="LogoImage_l1tdaxxn"/></div><div class="ThemeSwitchDiv_ti2lwtw"><label class="Label_lok00ln" style="--lok00ln-0:#000"><input type="checkbox" disabled="" class="Input_i1midrh5"/><div class="Switch_s120pijg"></div></label><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="23" height="22" fill="orange" viewBox="0 0 130 130" enable-background="new 0 0 129 129"><g><g><path d="m64.5,92.6c15.5,0 28-12.6 28-28s-12.6-28-28-28-28,12.6-28,28 12.5,28 28,28zm0-47.9c11,0 19.9,8.9 19.9,19.9 0,11-8.9,19.9-19.9,19.9s-19.9-8.9-19.9-19.9c0-11 8.9-19.9 19.9-19.9z"></path><path d="m68.6,23.6v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1z"></path><path d="m60.4,105.6v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1z"></path><path d="m96.4,38.5l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8 0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"></path><path d="m23.5,105.6c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8z"></path><path d="m122.5,64.6c0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h12.9c2.2,1.42109e-14 4.1-1.8 4.1-4.1z"></path><path d="m10.6,68.7h12.9c2.3,0 4.1-1.8 4.1-4.1 0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.9,4.1 4.1,4.1z"></path><path d="m102.6,106.8c1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.9,1.2 2.9,1.2z"></path><path d="m38.4,38.5c1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"></path></g></g></svg></div></div><div class="Inner_ir6lat6"><div><h1 id="using-on-the-web">
          <a class="anchor" href="#using-on-the-web">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Using on the Web</h1>
<h2 id="pre-requisites">
          <a class="anchor" href="#pre-requisites">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Pre-requisites</h2>
<p>Make sure that you have followed the getting started guide and have <code>react-native-paper</code> installed and configured before following this guide.</p>
<p>We're going to use <a href="https://github.com/necolas/react-native-web">react-native-web</a> and <a href="https://webpack.js.org/">webpack</a> to use React Native Paper on the web, so let's install them as well.</p>
<p>To install <code>react-native-web</code>, run:</p>
<pre><code class="language-sh">yarn add react-native-web react-dom react-art</code></pre>
<h3 id="using-cra-create-react-app">
          <a class="anchor" href="#using-cra-create-react-app-">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Using CRA (<a href="https://github.com/facebook/create-react-app">Create React App</a>)</h3>
<p>Install <a href="https://github.com/timarney/react-app-rewired"><code>react-app-rewired</code></a> to override <code>webpack</code> configuration:</p>
<pre><code class="language-sh">yarn add --dev react-app-rewired</code></pre>
<p><a href="#2-configure-babel-loader">Configure <code>babel-loader</code></a> using a new file called <code>config-overrides.js</code>:</p>
<pre><code class="language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">override</span><span class="token punctuation">(</span><span class="token parameter">config<span class="token punctuation">,</span> env</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  config<span class="token punctuation">.</span>module<span class="token punctuation">.</span>rules<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
    exclude<span class="token punctuation">:</span> <span class="token regex">/node_modules[/\\](?!react-native-vector-icons)/</span><span class="token punctuation">,</span>
    use<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      loader<span class="token punctuation">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
      options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// Disable reading babel configuration</span>
        babelrc<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        configFile<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>

        <span class="token comment">// The configuration for compilation</span>
        presets<span class="token punctuation">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">[</span><span class="token string">"@babel/preset-env"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useBuiltIns<span class="token punctuation">:</span> <span class="token string">"usage"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token string">"@babel/preset-react"</span><span class="token punctuation">,</span>
          <span class="token string">"@babel/preset-flow"</span><span class="token punctuation">,</span>
          <span class="token string">"@babel/preset-typescript"</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
          <span class="token string">"@babel/plugin-proposal-class-properties"</span><span class="token punctuation">,</span>
          <span class="token string">"@babel/plugin-proposal-object-rest-spread"</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> config<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Change your script in <code>package.json</code>:</p>
<pre><code class="language-diff">/* package.json */

<span class="token unchanged">  "scripts": {
</span><span class="token deleted-sign deleted">-   "start": "react-scripts start",
</span><span class="token inserted-sign inserted">+   "start": "react-app-rewired start",
</span><span class="token deleted-sign deleted">-   "build": "react-scripts build",
</span><span class="token inserted-sign inserted">+   "build": "react-app-rewired build",
</span><span class="token deleted-sign deleted">-   "test": "react-scripts test --env=jsdom",
</span><span class="token inserted-sign inserted">+   "test": "react-app-rewired test --env=jsdom"
</span>}</code></pre>
<h3 id="custom-webpack-setup">
          <a class="anchor" href="#custom-webpack-setup">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Custom webpack setup</h3>
<p>To install <code>webpack</code>, run:</p>
<pre><code class="language-sh">yarn add --dev webpack webpack-cli webpack-dev-server</code></pre>
<p>If you don't have a webpack config in your project, copy the following to <code>webpack.config.js</code> get started:</p>
<pre><code class="language-js"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  mode<span class="token punctuation">:</span> <span class="token string">'development'</span><span class="token punctuation">,</span>

  <span class="token comment">// Path to the entry file, change it according to the path you have</span>
  entry<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'App.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

  <span class="token comment">// Path for the output files</span>
  output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    path<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    filename<span class="token punctuation">:</span> <span class="token string">'app.bundle.js'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// Enable source map support</span>
  devtool<span class="token punctuation">:</span> <span class="token string">'source-map'</span><span class="token punctuation">,</span>

  <span class="token comment">// Loaders and resolver config</span>
  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>

    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>

  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// Development server config</span>
  devServer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    contentBase<span class="token punctuation">:</span> <span class="token punctuation">[</span>path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'public'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    historyApiFallback<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
<p>Also create a folder named <code>public</code> and add the following file named <code>index.html</code>:</p>
<pre><code class="language-html"><span class="token doctype">&lt;!doctype html&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charSet</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">httpEquiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width=device-width,minimum-scale=1,initial-scale=1<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>App<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">html, body, #root</span> <span class="token punctuation">{</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">#root</span> <span class="token punctuation">{</span>
      <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
      <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>root<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app.bundle.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span></code></pre>
<p>Now we're ready to start configuring the project.</p>
<h2 id="configure-webpack">
          <a class="anchor" href="#configure-webpack">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Configure webpack</h2>
<h3 id="1-alias-react-native-to-react-native-web">
          <a class="anchor" href="#1-alias-react-native-to-react-native-web">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        1. Alias <code>react-native</code> to <code>react-native-web</code></h3>
<p>First, we have to tell webpack to use <code>react-native-web</code> instead of <code>react-native</code>. Add the following alias in your webpack config under <code>resolve</code>:</p>
<pre><code class="language-js">alias<span class="token punctuation">:</span> <span class="token punctuation">{</span>
  <span class="token string">'react-native$'</span><span class="token punctuation">:</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'react-native-web'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span></code></pre>
<h3 id="2-configure-babel-loader">
          <a class="anchor" href="#2-configure-babel-loader">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        2. Configure <code>babel-loader</code></h3>
<p>Next, we want to tell <code>babel-loader</code> to compile <code>react-native-paper</code> and <code>react-native-vector-icons</code>. We would also want to disable reading the babel configuration files to prevent any conflicts.</p>
<p>First install the required dependencies:</p>
<pre><code class="language-sh">yarn add --dev babel-loader @babel/preset-env @babel/preset-react @babel/preset-flow @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread</code></pre>
<p>Now, add the following in the <code>module.rules</code> array in your webpack config:</p>
<pre><code class="language-js"><span class="token punctuation">{</span>
  test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
  exclude<span class="token punctuation">:</span> <span class="token regex">/node_modules[/\\](?!react-native-vector-icons)/</span><span class="token punctuation">,</span>
  use<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    loader<span class="token punctuation">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
    options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// Disable reading babel configuration</span>
      babelrc<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      configFile<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>

      <span class="token comment">// The configuration for compilation</span>
      presets<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">[</span><span class="token string">'@babel/preset-env'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useBuiltIns<span class="token punctuation">:</span> <span class="token string">'usage'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token string">'@babel/preset-react'</span><span class="token punctuation">,</span>
        <span class="token string">'@babel/preset-flow'</span><span class="token punctuation">,</span>
        <span class="token string">"@babel/preset-typescript"</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token string">'@babel/plugin-proposal-class-properties'</span><span class="token punctuation">,</span>
        <span class="token string">'@babel/plugin-proposal-object-rest-spread'</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre>
<h3 id="3-configure-file-loader">
          <a class="anchor" href="#3-configure-file-loader">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        3. Configure <code>file-loader</code></h3>
<h4 id="webpack--50">webpack &lt; 5.0</h4>
<p>To be able to import images and other assets using <code>require</code>, we need to configure <code>file-loader</code>. Let's install it:</p>
<pre><code class="language-sh">yarn add --dev file-loader</code></pre>
<p>To configure it, add the following in the <code>module.rules</code> array in your webpack config:</p>
<pre><code class="language-js"><span class="token punctuation">{</span>
  test<span class="token punctuation">:</span> <span class="token regex">/\.(jpg|png|woff|woff2|eot|ttf|svg)$/</span><span class="token punctuation">,</span>
  loader<span class="token punctuation">:</span> <span class="token string">'file-loader'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span></code></pre>
<h5 id="webpack--50-1">webpack &gt;= 5.0</h5>
<p>Use <code>asset/resource</code>, since <code>file-loader</code> was deprecated in webpack v5.</p>
<pre><code class="language-js"><span class="token punctuation">{</span>
  test<span class="token punctuation">:</span> <span class="token regex">/\.(jpg|png|woff|woff2|eot|ttf|svg)$/</span><span class="token punctuation">,</span>
  type<span class="token punctuation">:</span> <span class="token string">'asset/resource'</span>
<span class="token punctuation">}</span></code></pre>
<h2 id="load-the-material-community-icons">
          <a class="anchor" href="#load-the-material-community-icons">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Load the Material Community Icons</h2>
<p>If you followed the getting started guide, you should have the following code in your root component:</p>
<pre><code class="language-js"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">PaperProvider</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">PaperProvider</span></span><span class="token punctuation">&gt;</span></span></code></pre>
<p>Now we need tweak this section to load the Material Community Icons from the <a href="https://github.com/oblador/react-native-vector-icons"><code>react-native-vector-icons</code></a> library:</p>
<pre><code class="language-js"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">PaperProvider</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">React.Fragment</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token punctuation">{</span>Platform<span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'web'</span> <span class="token operator">?</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{`
        @font-face {
          font-family: 'MaterialCommunityIcons';
          src: url(${require('react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf')}) format('truetype');
        }
      `}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">React.Fragment</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">PaperProvider</span></span><span class="token punctuation">&gt;</span></span></code></pre>
<p>Remember to import <code>Platform</code> from <code>react-native</code> at the top:</p>
<pre><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> Platform <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span></code></pre>
<p>You can also load these fonts using <a href="https://github.com/webpack-contrib/css-loader"><code>css-loader</code></a> if you prefer.</p>
<h2 id="load-the-roboto-fonts-optional">
          <a class="anchor" href="#load-the-roboto-fonts-optional-">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Load the Roboto fonts (optional)</h2>
<p>The default theme in React Native Paper uses the Roboto font. You can add them to your project following <a href="https://fonts.google.com/specimen/Roboto?selection.family=Roboto:100,300,400,500">the instructions on its Google Fonts page</a>.</p>
<h2 id="were-done">
          <a class="anchor" href="#we-39-re-done-">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        We're done!</h2>
<p>You can run <code>webpack-dev-server</code> to run the webpack server and open your project in the browser. You can add the following script in your <code>package.json</code> under the <code>"scripts"</code> section to make it easier:</p>
<pre><code class="language-json"><span class="token property">"web"</span><span class="token operator">:</span> <span class="token string">"webpack-dev-server --open"</span></code></pre>
<p>Now you can run <code>yarn web</code> to run the project on web.</p>
</div></div></main></div></div>
    <style type="text/css">
      :root {
        --theme-primary-color: #397AF9;
      }
    </style>
  
    <script>
      window.__INITIAL_PATH__ = 'using-on-the-web';
    </script>
  <script src="app.bundle.js"></script><script src="scripts/snack.js"></script><script src="scripts/version.js"></script></body></html>